<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>P11-出行特征分析</title>
    <!-- 引入jquery文件 -->
    <script src="../js/jquery-3.1.1.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="../js/echarts.js"></script>
</head>
<body>
<div id="map" style="width: 800px;height:600px;"></div>

<script>
    // JS
    var chart = echarts.init(document.getElementById('map'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'urumqi'
        }]
    });

    // JSON
    $.getJSON('../data/wlmq.json', function (data) {
        echarts.registerMap('urumqi', data);
        var chart = echarts.init(document.getElementById('map'));
        chart.setOption({
            title: {
                text: 'P11-出行特征分析'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (p / km2)'
            },
            visualMap: {
                min: 100000,
                max: 400000,
                text:['High','Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue','yellow', 'orangered']
                }
            },
            series: [
                {
                    type: 'map',
                    mapType: 'urumqi', // 自定义扩展图表类型
                    itemStyle:{
                        normal:{label:{show:false}},
                        emphasis:{label:{show:true}}
                    },
                    data:[
                        {name: '达坂城区', value: 23446},
                        {name: '米东区', value: 300007},
                        {name: '沙依巴克区', value: 413544},
                        {name: '水磨沟区', value: 285126},
                        {name: '天山区', value: 480317},
                        {name: '头屯河区', value: 127065},
                        {name: '乌鲁木齐县', value: 79164},
                        {name: '新市区', value: 577121}
                    ]
                }
            ]
        });
    });
</script>
</body>
</html>